<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo">
      <div class="left">
        <el-select v-model="searchInfo.status" style="width:120px;" clearable placeholder="是否上架">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input v-model="searchInfo.durationText" style="width:120px;" placeholder="产品描述" />
        <el-button type="primary" @click="searchInfoMation">搜 索</el-button>
      </div>
      <el-button
        v-if="accreditChildren.createProductManage"
        class="right"
        type="primary"
        @click="openDialog('create')"
      >新建产品</el-button>
    </div>
    <el-table ref="table" border :data="tableData" stripe :height="this.$getTableHeight">
      <el-table-column prop="durationText" label="产品描述" />
      <el-table-column prop="originalPrice" label="原价格" />
      <el-table-column prop="discountPrice" label="折后价" />
      <el-table-column prop="type" label="产品类型">
        <template
          slot-scope="scope"
        >{{ scope.row.type===1 ? '礼物' : scope.row.type===0 ?'会员套餐' :'&nbsp;' }}</template>
      </el-table-column>
      <el-table-column label="是否上架">
        <template
          slot-scope="scope"
        >{{ scope.row.status ===true ? '是' :scope.row.status ===false ? '否':'' }}</template>
      </el-table-column>
      <el-table-column label="操作" width="200px;">
        <template slot-scope="scope">
          <span v-if="scope.row.id">
            <span
              v-if="accreditChildren.editorProductManage"
              class="_primary"
              @click="openDialog(scope.row.id)"
            >编辑</span>
            <span
              v-if="accreditChildren.deleteProductMange"
              class="_delete"
              @click="deleteInfo(scope.row)"
            >删除</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination clearfix">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <div v-if="dialogVisible">
      <el-dialog
        :title="isCreate ?'新建产品':'编辑产品'"
        center
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
        width="600"
        :before-close="handleClose"
      >
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-row :gutter="20" style="width:600px;">
            <el-col :span="12">
              <el-form-item label="产品类型：" prop="type">
                <el-select
                  v-model="ruleForm.type"
                  clearable
                  placeholder="产品类型"
                  @change="changeType"
                >
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品描述：" prop="durationText">
                <el-input v-model="ruleForm.durationText" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="width:600px;">
            <el-col :span="12">
              <el-form-item label="原价格：" prop="originalPrice">
                <el-input v-model="ruleForm.originalPrice" controls-position="right" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="现价格：" prop="discountPrice">
                <el-input v-model="ruleForm.discountPrice" controls-position="right" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="width:600px;">
            <el-col :span="12">
              <el-form-item label="图片框：">
                <uploadImg
                  remark="产品图标"
                  :list="photoList"
                  type-code="IMAGE_ADVERTISING_FILE"
                  @changeadvert="changeadvert"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排序：" prop="sort">
                <el-input v-model="ruleForm.sort" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="!showProduct" :gutter="20" style="width:600px;">
            <el-col :span="12">
              <el-form-item label="实际时长：" prop="duration">
                <el-input v-model="ruleForm.duration" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="赠送时长：" prop="isDuration">
                <el-input v-model="ruleForm.isDuration" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="!showProduct" :gutter="20" style="width:600px;">
            <el-col :span="12">
              <el-form-item label="顶部标签：">
                <el-input v-model="ruleForm.label" placeholder="促销、热销" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="width:600px;">
            <el-col :span="12">
              <el-form-item label="是否上架：">
                <el-checkbox v-model="ruleForm.status" />
              </el-form-item>
            </el-col>
            <el-col :span="12" />
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitVal">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import mmUrl from '~/utils/utilUrl';
import regular from '~/utils/regular';
import Pagination from '~/components/commom/pagination';
import uploadImg from '~/components/commom/uploadImg';
import {
  _currentChange,
  _sizeChange,
  _changeTable,
  _deleteMethods,
  _searchInfo,
  reduceArr,
  createDics,
  changeTableHeight
} from '~/utils/util';
export default {
  components: {
    Pagination,
    uploadImg
  },
  data() {
    return {
      showProduct: true,
      photoList: [],
      accreditChildren: {},
      dialogVisible: false,
      loading: false,
      changeSelectOr: false,
      isCreate: true,
      tableData: [],
      options1: [
        {
          label: '会员套餐',
          value: 0
        },
        {
          label: '礼物',
          value: 1
        }
      ],
      rules: {
        type: regular.requireChange,
        durationText: regular.require,
        originalPrice: regular.positive,
        discountPrice: regular.positive,
        sort: regular.sort,
        duration: regular.positive,
        isDuration: regular.positive1
      },
      ruleForm: {
        type: null,
        durationText: '',
        originalPrice: null,
        discountPrice: null,
        thumbnail: '',
        status: false,
        sort: null,
        duration: null,
        isDuration: null,
        label: null
      },
      options: [
        {
          label: '是',
          value: true
        },
        {
          label: '否',
          value: false
        }
      ],
      totalCount: 0,
      page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 10,
        skipCount: 0
      },
      copySearchInfo: {
        durationText: '',
        keyword: '',
        status: null
      },
      searchInfo: {
        durationText: '',
        keyword: '',
        status: null
      }
    }
  },
  mounted() {
    this.getInitTableDate()
    const result = JSON.parse(sessionStorage.getItem('menu'))
    this.accreditArr = reduceArr(result, '/' + this.$route.name)
    this.accreditChildren = createDics(
      this.accreditArr.children,
      'permissionCode'
    )
  },
  methods: {
    changeType(res) {
      if (res === 0) {
        this.showProduct = false
        return false
      }
      this.showProduct = true
    },
    submitVal() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this.$post({
            url: this.isCreate ? mmUrl.products.create : mmUrl.products.editor,
            data: {
              item: this.ruleForm
            }
          }).then(() => {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.dialogVisible = false
            this.searchInfoMation()
          })
        }
      })
    },
    changeadvert(res) {
      this.ruleForm.thumbnail = res.fileUrl
    },
    openDialog(res) {
      this.dialogVisible = true
      if (res === 'create') {
        this.isCreate = true
      } else {
        this.isCreate = false
        this.$post({
          url: mmUrl.products.loadEditor,
          data: {
            id: res
          }
        }).then(res => {
          this.ruleForm = res.item
          this.photoList = [{ fileUrl: res.item.thumbnail }]
        })
      }
    },
    handleClose() {
      this.$refs['ruleForm'].resetFields()
      this.ruleForm.thumbnail = '';
      this.photoList = []
      this.dialogVisible = false
    },
    getInitTableDate() {
      this.$post({
        url: mmUrl.products.get,
        data: {
          durationText: '',
          keyword: '',
          page: this.page
        }
      }).then(res => {
        this.loading = false
        this.tableData = res.items.items
        this.totalCount = res.items.totalCount
        changeTableHeight(this)
      })
    },
    deleteInfo(row) {
      const that = this
      _deleteMethods(mmUrl.products.delete, row, that).then(() => {
        this.searchInfoMation('no')
      })
    },
    searchInfoMation(res) {
      this.copySearchInfo = JSON.parse(JSON.stringify(this.searchInfo))
      const result = _searchInfo(res, this.page, this.copySearchInfo)
      this.changeTableData(result)
    },
    changeTableData(res) {
      const that = this
      _changeTable(mmUrl.products.get, res, that)
    },
    handleSizeChange(val) {
      const result = _sizeChange(val, this.page, this.copySearchInfo)
      this.changeTableData(result)
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.copySearchInfo)
      this.changeTableData(result)
    }
  }
}
</script>

<style lang='scss'>
</style>
